<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="../dist/vux.css">
    <script src="vue.1.0.26.js"></script>
    <style>
      .center {
        text-align: center;
        padding-top: 20px;
        color: #fff;
        font-size: 18px;
      }
      .center img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 2px solid #ececec;
      }
    </style>
  </head>
  <body>
    <div id="demo">
      <blur :blur-amount=40 url="https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg">
        <p class="center">
            <img src="https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg">
              </p>
      </blur>
    </div>

    <script src="../dist/components/blur/index.js"></script>

    <script>
    Vue.component('blur', vuxBlur)
    new Vue({
      el: '#demo'
    })
    </script>
  </body>
</html>
